import React, {PureComponent} from 'react';
import {
  View,
  StyleSheet,
  Text,
  TextInput,
  Image,
  TouchableOpacity,
  Keyboard,
  Modal,
} from 'react-native';
import I18n from 'react-native-i18n';
import {connect} from 'react-redux';
import BaseComponent from '../base/BaseComponent';
import {TextButton, LinearBoardButton} from '../../components/Button';
import {NormalHeader} from '../../components/NavigationHeader';
import {showToast} from '../../components/Toast';
import {userLogout} from '../../redux/action';
import Clipboard from '@react-native-community/clipboard';
import LinearGradient from 'react-native-linear-gradient';
import LayoutConstants from '../../config/LayoutConstants';

//#FFCB26
class SelectSellType extends BaseComponent {
  constructor(props) {
    super(props);

    this.state = {};
  }

  renderComponent = () => {
    let top =
      500 +
      Math.sqrt(
        Math.pow(500, 2) - Math.pow(LayoutConstants.WINDOW_WIDTH / 2, 2),
      );

    let {img, name} = this.props.navigation.state.params.nft;

    return (
      <View style={{flex: 1, backgroundColor: '#fff'}}>
        <NormalHeader
          navigation={this.props.navigation}
          text="Select sell method"
          left={{
            icon: require('../../assets/common/common_back_white.png'),
            onPress: () => {
              Keyboard.dismiss();
              this.props.navigation.goBack();
            },
          }}
        />
        <View style={{padding: 20, flex: 1}}>
          <View
            style={{
              width: 1000,
              height: 1000,
              alignSelf: 'center',
              marginTop: -top,
              borderRadius: 500,
              backgroundColor: '#160231',
            }}></View>
          <Image
            style={{
              width: 90,
              height: 90,
              borderRadius: 10,
              alignSelf: 'center',
              marginTop: -30,
            }}
            source={{uri: img}}></Image>
          <Text
            style={{
              fontWeight: 'bold',
              color: '#8A7B6C',
              alignSelf: 'center',
              marginTop: 10,
            }}>
            {name}
          </Text>
          <LinearGradient
            start={{x: 0, y: 1}}
            end={{x: 1, y: 1}}
            colors={['#CE18EC', '#6601F5']}
            style={{padding: 2, height: 180, marginTop: 20, borderRadius: 20}}>
            <TouchableOpacity
              style={{
                flex: 1,
                justifyContent: 'center',
                backgroundColor: '#35007C',
                borderRadius: 18,
                alignItems: 'center',
                justifyContent: 'center',
              }}
              activeOpacity={0.6}
              onPress={() => {
                this.props.navigation.navigate('AuctionSet', {
                  nft: this.props.navigation.state.params.nft,
                  type: 0,
                });
              }}>
              <Image
                source={require('../../assets/auction/auction_type_0.png')}
              />
              <Text
                style={{
                  fontWeight: 'bold',
                  marginTop: 5,
                  fontSize: 20,
                  color: 'white',
                }}>
                Highest Bid
              </Text>
              <Text style={{fontSize: 14, marginTop: 5, color: 'white'}}>
                Auction to the highest bidder
              </Text>
            </TouchableOpacity>
          </LinearGradient>
          <LinearGradient
            start={{x: 0, y: 1}}
            end={{x: 1, y: 1}}
            colors={['#CE18EC', '#6601F5']}
            style={{padding: 2, height: 180, marginTop: 20, borderRadius: 20}}>
            <TouchableOpacity
              style={{
                flex: 1,
                justifyContent: 'center',
                backgroundColor: '#35007C',
                borderRadius: 18,
                alignItems: 'center',
                justifyContent: 'center',
              }}
              activeOpacity={0.6}
              onPress={() => {
                this.props.navigation.navigate('AuctionSet', {
                  nft: this.props.navigation.state.params.nft,
                  type: 1,
                });
              }}>
              <Image source={require('../../assets/home/offers.png')} />
              <Text
                style={{
                  fontWeight: 'bold',
                  fontSize: 20,
                  marginTop: 5,
                  color: 'white',
                }}>
                Set Price
              </Text>
              <Text style={{fontSize: 14, marginTop: 5, color: 'white'}}>
                Sell at a fixed price
              </Text>
            </TouchableOpacity>
          </LinearGradient>
        </View>
      </View>
    );
  };
}

const mapStateToProps = (state) => ({
  userInfo: state.User.userInfo,
});

const mapDispatchToProps = (dispatch) => ({
  userLogout: (item) => dispatch(userLogout()),
});

export default connect(mapStateToProps, mapDispatchToProps)(SelectSellType);
